<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
	<link rel="shortcut icon" href="/static/img/favicon.ico">
	<link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
	<title>代理管理</title>
</head>
<body class="text-center">
	<script type="text/javascript" src="/static/js/jquery.min.js"></script>
	<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
	
	<div class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" style="width: 300px;" >
          <input id="mySearch" onkeydown="search(this)" type="search" class="form-control" placeholder="搜索手机号/用户名" aria-label="Search">
    </div>
	<ul class="nav nav-tabs">
	  <li class="nav-item">
	    <a class="nav-link active" id="showAgentList" aria-current="page" href="javascript:;">代理列表</a>
	  </li>
	  <li class="nav-item">
	    <a class="nav-link" id="showCodeList" href="javascript:;">激活码</a>
	  </li>
	</ul>
	
	<!-- 代理列表 -->
	<div id="agentList">
		<table class="table table-hover">
		  <thead>
		    <tr>
		    	<th scope="col">
		    		<input onclick="agentCheckbox(this);" type="checkbox">
		    	</th>
		      <th scope="col">编号</th>
		      <th scope="col">用户名</th>
		      <th scope="col">手机号</th>
		      <th scope="col">激活码</th>
		      <th scope="col">开通时间</th>
		      <th scope="col">累计收益</th>
		      <th scope="col">下级用户</th>
		    </tr>
		  </thead>
		  <tbody>
		    <tr th:each="item:${list}">
		    	<td><input class="childcheckbox" type="checkbox"></td>
		      <td th:text="${item.id}"></td>
		      <td th:text="${item.username}"></td>
		      <td th:text="${item.phone}"></td>
		      <td th:text="${item.invitationcode}"></td>
		      <td th:text="${item.updatetime}"></td>
		      <td th:text="${item.balance}"></td>
		      <td th:text="${item.pid}"></td>
		    </tr>
		  </tbody>
		</table>
	</div>
	
	<!-- 激活码列表 -->
	<div id="agentCodeList" style="display:none;">
		<table class="table table-hover">
		  <thead>
		    <tr>
		    	<th scope="col">
		    		<input type="checkbox">
		    	</th>
		      <th scope="col">激活码</th>
		    </tr>
		  </thead>
		  <tbody>
		    <tr>
		      <td><input type="checkbox"></td>
		      <td></td>
		    </tr>
		  </tbody>
		</table>
	</div>

	<script type="text/javascript">
		$("#showAgentList").click(function(){
			if(!$("#showAgentList").hasClass("active")){
				$("#showAgentList").attr("class","nav-link active");
				$("#showCodeList").attr("class","nav-link");
				$("#agentList").show();
				$("#agentCodeList").hide();
			}
		});
		$("#showCodeList").click(function(){
			if(!$("#showCodeList").hasClass("active")){
				$("#showCodeList").attr("class","nav-link active");
				$("#showAgentList").attr("class","nav-link");
				$("#agentList").hide();
				$("#agentCodeList").show();
			}
		});
		function agentCheckbox(e){
			$(".childcheckbox").each(function(a){
				this.checked = e.checked;
			});
		}
	</script>

</body>
</html>